<template>
  <div class="edu-header header-store">
    <div class="edu-container">
      <div class="edu-component"></div>
      <span
        style="
          color: #fff;
          font-size: 40px;
          display: inline-block;
          vertical-align: middle;
          font-family: 华文隶书, serif;
          line-height: 60px;
        "
        >音 驹</span
      >
      <span
        style="
          color: #fff;
          font-size: 24px;
          display: inline-block;
          vertical-align: middle;
          line-height: 60px;
          font-family: 'Microsoft Himalaya', serif;
          margin-left: 10px;
        "
        >YINJU</span
      >
      <ul class="edu-nav">
        <li
          class="edu-nav-item"
          :class="{ 'edu-active': eduActive == '/index' }"
        >
          <router-link to="/index">首页</router-link>
        </li>

        <!--已登录 start-->
        <template v-if="username !== null">
          <li class="edu-nav-item">
            <a
              class="edu-case-active"
              @click="exitSystem"
              href="JavaScript:void(0);"
              >退出</a
            >
          </li>
          <li
            class="edu-nav-item edu-member"
            :class="{ 'edu-active': eduActive == '/edu/myInfo' }"
          >
            <router-link class="edu-nav-avatar edu-case-active" to="/layout">
              <!--              <img v-if="studentInfo.studentIcon!=null" :src="studentInfo.studentIcon">-->
              <!--              <img v-else src="@/assets/edu/images/head.jpg">-->
              <cite>欢迎您：{{ username }}</cite>
            </router-link>
          </li>
        </template>
        <!--已登录 end-->
        <!--未登录 start-->
        <template v-else>
          <li
            class="edu-nav-item"
            :class="{ 'edu-active': eduActive == '/edu/login' }"
          >
            <router-link to="/Login">登录 | 注册</router-link>
          </li>
        </template>
        <!--未登录 end-->
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import useUserInfoStore from '@/stores/userInfo.js'
import { useTokenStore } from '@/stores/token.js'
import { permissionStoreService } from '@/stores/permission.js'
const permissionStore = permissionStoreService()
const tokenStore = useTokenStore()
const userInfoStore = useUserInfoStore()

const username = sessionStorage.getItem('user')

// 退出系统
const exitSystem = async () => {
  ElMessageBox.confirm('您确定要退出吗？', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      tokenStore.removeToken()
      userInfoStore.removeInfo()
      permissionStore.removePermission()
      sessionStorage.clear()
      ElMessage.success('退出成功')
      // 返回课程首页
      window.location.href = '/'
    })
    .catch(() => {
      ElMessage.error('退出失败')
    })
}
</script>

<style scoped>
.edu-header {
  height: 59px;
  border-bottom: 1px solid #404553;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 1000;
  position: relative;
}

.edu-container {
  padding: 0;
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
  width: 80%; /* 设置容器宽度为80% */
}
.edu-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end; /* 如果需要将导航右对齐 */
}

.edu-container .logo img {
  width: 256px;
  height: 196px;
  border: none;
}

.edu-container .edu-nav {
  right: 15px;
  position: absolute;
  top: 0;
  padding: 0;
  background: none;
  color: #fff;
  border-radius: 2px;
  box-sizing: border-box;
}

.edu-nav .edu-nav-item {
  list-style-type: none; /* 去掉默认的列表样式 */
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 60px;
  margin: 0 20px;
}

.edu-nav * {
  font-size: 14px;
}

.edu-nav .edu-nav-item a {
  display: block;
  padding: 0 20px;
  color: #fff;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  text-decoration: none; /* 确保清除下划线 */
}

/* 确保在所有状态下都清除下划线 */
.edu-nav .edu-nav-item a:link,
.edu-nav .edu-nav-item a:visited,
.edu-nav .edu-nav-item a:hover,
.edu-nav .edu-nav-item a:active {
  text-decoration: none; /* 清除下划线 */
}

.edu-active {
  color: #fff !important;
}

.edu-nav .edu-nav-item a:hover,
.edu-nav .edu-active a {
  color: #fff;
}

.edu-nav .edu-active:after {
  top: auto;
  bottom: 0;
  width: 100%;
  position: absolute;
  left: 0;
  height: 5px;
  background-color: #5fb878;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}

/*头像样式*/
.edu-nav-avatar img {
  width: 36px;
  height: 36px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 100%;
  vertical-align: middle;
}

.edu-nav {
  margin: 0;
  padding: 0;
  display: flex; /* 使用 Flexbox 布局 */
  background-color: #f8f8f8; /* 设置背景颜色 */
}
</style>
